<template>
    <div class="manage1">
        <el-form :inline="true" class="manage1_from1">
            <el-form-item label=""></el-form-item>
            <el-form-item label="城市：">
                <el-input v-model="param.cityName" placeholder="城市" clearable class="manage1_from1_input1" />
            </el-form-item>
            <!--<el-form-item label="球员价格：">
                <el-input v-model="param.teamMemberPrice" placeholder="球员价格" clearable class="manage1_from1_input1" />
            </el-form-item>
            <el-form-item label="球队价格：">
                <el-input v-model="param.teamPrice" placeholder="球队价格" clearable class="manage1_from1_input1" />
            </el-form-item>
            <el-form-item label="直播价格：">
                <el-input v-model="param.livePirce" placeholder="直播价格" clearable class="manage1_from1_input1" />
            </el-form-item>


            <el-form-item label="发布时间：">
                <el-date-picker v-model="param.startTime" type="date" class="manage1_from1_time1" placeholder="开始时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /> &nbsp; 至 &nbsp;
                <el-date-picker v-model="param.endTime" type="date" class="manage1_from1_time1" placeholder="结束时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable />
            </el-form-item> --> <br />


            <el-form-item>
                <el-button type="primary" class="manage1_from1_button1"
                    @click="addShow = true, addData = {}">添加城市价格</el-button>
                <el-button type="primary" class="manage1_from1_button1" @click="getList(1)">搜索</el-button>
                <el-button @click="rewrite" text type="primary">
                    <el-icon :size="16">
                        <refresh />
                    </el-icon> &nbsp;重置筛选条件
                </el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="list1" v-loading="loading">
        <el-table ref="selectTable" :data="list">
            <el-table-column prop="cityPriceId" min-width="120" label="id"></el-table-column>

            <el-table-column prop="cityName" min-width="120" label="城市"></el-table-column>

            <el-table-column prop="matchLive" min-width="120" label="直播价格"></el-table-column>
            <el-table-column prop="teamMemberPrice" min-width="120" label="球员认证价格"></el-table-column>
            <el-table-column prop="teamPrice" min-width="120" label="球队认证价格"></el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                        <el-button @click="addData=scope.row;addShow=true" text
                            type="primary">编辑</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" />
                        <!-- <el-button @click="$router.push('/xiugaigonggao/'+scope.row.newsId)" text type="primary">修改</el-button>
                      <el-divider class="list1_operate1_line1" direction="vertical" /> -->
                        <el-button @click="tanchuang2(scope.row.cityPriceId)" text type="primary">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>
    <el-dialog v-model="addShow" title="添加/编辑城市价格" width="760px" close-on-click-modal="false">
        <el-form :model="addData" ref="submitForm" label-width="auto" :rules="rules">
            <el-form-item label="选择城市：" prop="city">
                <el-select v-model="addData.cityName" placeholder="请选择城市" class="w180">
                    <el-option v-for="(item, index) in cityL" :key="index" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="球员价格：">
                <el-input type="number" class="w220" v-model="addData.teamMemberPrice" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="球队价格：">
                <el-input type="number" class="w220" v-model="addData.teamPrice" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="直播价格：">
                <el-input type="number" class="w220" v-model="addData.matchLive" placeholder="请输入" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addShow = false, addData = {}">取消</el-button>
                <el-button type="primary" @click="submit(addData)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>

import areaData from '@/js/city.js'
export default {
    data() {
        return {
            list: [],
            addData: {},
            addShow: false,
            param: {
                pageNumber: 1,
                pageSize: 10,
            },
            loading: false,
            total: 0,
            dialogShow384: false,
            dialogShow385: false,
            cityL: [],
        }
    },

    created() {
        for (var i in areaData) {
            this.cityL = [...this.cityL, ...areaData[i].cities]
        }
        this.getList()
    },

    mounted() {
    },

    methods: {
        submit(addData){
            console.log('addData',addData)
            let that = this
            that.$api.ZcityPrice(addData).then(res=>{
                console.log('添加返回',res)
                that.getList();
                that.addData = {}
                that.addShow = false
                that.$message.success(res.message);
            })
        },
        rewrite() {
            let that = this;
            let obj = {
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize
            }
            that.param = obj;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
        getList(pageNumber) {
            this.loading = true;
            let res;
            if (pageNumber) {
                this.param.pageNumber = pageNumber;
            }
            this.$api.ZgetCityPriceListDto(this.param).then(res => {
                console.log('res====', res)
                if (res) {
                    this.list = res.records
                    this.total = res.total;
                }
            })
            this.loading = false;
        },




        tanchuang2(cityPriceId) {
            let that = this;
            this.$msgbox.confirm(
                "是否删除该价格",
                "删除提醒",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                console.log('cityPriceId', cityPriceId)
                this.$api.ZcityPriceremove({ cityPriceId }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },
    }

}


</script>
<style lang="scss" scoped>
.manage1 {
    padding: 10px 20px 10px;
    background-color: #fff;
    text-align: left;

    .manage1_from1 {
        background: #F2F3F5;
        padding: 24px 16px 4px;
        text-align: left;

        .manage1_from1_input1 {
            width: 250px
        }

        .manage1_from1_input2 {
            width: 110px;
            margin-right: 10px;
        }

        .manage1_from1_input3 {
            width: 110px;
            margin-left: 10px;
        }

        .manage1_from1_select1 {
            width: 250px
        }

        .manage1_from1_time1 {
            width: 110px
        }

        .manage1_from1_button1 {
            width: 115px;
        }
    }

}

.list1 {
    background-color: #fff;

    .list1_head1 {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .list1_operate1 {
        width: 100%;
        display: flex;
        justify-content: center;

        .list1_operate1_line1 {
            margin: auto 10px;
        }
    }

    .list1_page1 {
        height: 70px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .list1_page1_title1 {
            font-size: 10px;
            color: #A4A4A4;
        }
    }
}
</style>